/**
 * desc：webpack配置文件说明
 * author：DestinyJun
 * date：  2021/5/5 15:59
 */
// 这个配置文件，起始就是一个js文件，通过node中的模块操作，向外暴漏了一个配置对象
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack') // 启用热更新第二步
// 导入在内存中生成html的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  devtool: 'eval',
  // 指定打包入口文件
  entry: path.join(__dirname,'./src/main.js'), //  入口。表示要使用webpack打包的那个文件
  // 指定打包输出目录
  output: {
    path: path.join(__dirname,'./dist'), // 指定打包好的文件，输出到那个目录中去
    filename: 'bundle.js', // 指定输出文件的名称
  },
  // 配置webpack-dev-server
  devServer: {
    // 此处配置webpack-dev-server的相关命令参数配置项，这样就无需在webpack-dev-server命令后面加上参数，相对来说，这种方式麻烦一些
    open: false, // 自动打开浏览器
    port: 3000, // 设置启动时运行的端口
    contentBase: 'src', //  指定托管的根目录
    hot: true, // 启用热更新第一步(webpack4.x默认集成了热跟新，只需要开启这里即可，无需再去导入热更新模块对象）
  },
  // 配置插件的节点,只要是属于webpack的插件都要放在plugins里面
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包过程
    new CleanWebpackPlugin(),// 每次打包之前清空
    new CopyWebpackPlugin(
      {
        patterns: [
          {
            from: path.resolve(__dirname, 'src','assets') ,
            to: path.join(buildFileDest,'public'),
          }
        ],
      }
    ),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
    }),
    new htmlWebpackPlugin({ // 指定html-webpack-plugin插件的配置项并创建一个在内存中生成HTML的插件对象
      template: path.join(__dirname,'.src//index.html'), // 指定模板页面，将来会根据指定的页面路径文件作为模板去生成内存中的页面
      filename: "index.html" // 指定在内存中生成的HTML文件页面的名称
    }),
    new VueLoaderPlugin()
  ],
  // module配置节点，其是一个对象，用于配置所有的第三方模块加载器
  module: {
    // rule属性是一个数组，其存放了所有第三方文件的匹配和处理规则
    // 里面记录的是一个正则表达式以及正则匹配到后需要使用的模块数组名称的对象
    rules: [
      // 配置处理.css文件的第三方loader
      // 这里注意：use里面的插件处理顺序是从右到左，直到找不到处理的loader后最后才交给webpack进行打包处理
      {test: /\.css$/, use: ['style-loader', 'css-loader']},
      // 配置处理.less文件的第三方loader,因为less-loader内部依赖less，所以这里不需要显示添加less的loader
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
      // 配置处理.scss文件的第三方loader,因为sass-loader内部依赖sass，所以这里不需要显示添加sass的loader
      {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
      // 配置处理css中的文件路径的loader，使用url-loader，默认其会把图片转为base64,但是如果图片太大，我们就
      // 不需要处理，此时需要配置参数
      // limit：1000【当图片文件的字节小于小于等于其设置的值时，转为base64配置的，大于其值时，转为URL地址，而不会转为base64】
      // 当其把把图片转为url地址时，此时图片的名称会被其哈希算法，此时需要配置name属性：name=[name].[ext]
      // 为防止打包后重名，还可以设置哈希值：name=[hash:8]-[name].[ext] 【设置8位哈希值】
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=70000&name=[hash:8]-[name].[ext]'},
      // 配置处理字体文件
      {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},
      /**
       * 配置Babel
       * 在项目根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件是一个json文件，所在在书写配置
       * 的时候必须符合json语法：不能注释，字符串必须使用双引号
       * .babelrc配置属性：
       * 【1】plugins：配置babeld的插件，在.babelrc配置文件中配置babel的插件时，不需要插件的babel-plugin-前
       * 缀，只需要后面的插件名称即可
       * 【2】presets：语法预设
       * 注意：在配置Babel的loader规则的时候，必须把node_modules目录通过exclude选项排除掉，原因有如下两点：
       * 【1】如果排除node_modules，则Babel会把node_modules目录中所有的第三方js文件都打包翻译，这样会非常
       * 消耗CPU，同时，打包速度也非常慢
       * 【2】那怕最终打包成功，Babel把node_modules中的js都转换完毕，项目也无法正常运行
       */
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        },
        exclude: /node_modules/
      },
      // 配置处理.vue文件
      {test: /\.vue$/, use: 'vue-loader'}
    ]

  },
  // 此处配置重定向所引入包的查找路径
  resolve: {
    alias: {
     "vue$": "vue/dist/vue.js" // 修改vue被导入时的包路径
    }
  }
}
